import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    StatusBar,
    ScrollView,
    Image,
    ImageBackground,
    Switch,
    TouchableOpacity
} from 'react-native';

export default class Integral extends Component {
    static navigationOptions = {
        title: '积分',
    }; 
    render() {
        const { navigate } = this.props.navigation;
        
        return (
            <View style={styles.container}>
                <StatusBar hidden={true} />
                <View style={styles.title}>
                    <View style={styles.logo}>
                        <Image style={{width:30,height:30}} source={require('../images/dianxinlogo.png')}/>
                    </View>
                    <View style={{flex:5}}>
                        <Text style={[styles.text,styles.txt_fl]}>
                            积分
                        </Text>
                    </View>
                </View> 
                <ScrollView style={styles.sv}>
                    <View style={styles.personal}>
                    {/* <ImageBackground style={{height:250}} source = {require('../images/bg.png')}> */}
                        <View style={styles.portrait}>
                            <View style={styles.portrait_img}>
                                <Image style={{width:100,height:100}} source = {require('../images/portrait.png')}/>                            
                            </View>
                        </View>
                        <View>
                            <Text style={styles.txt_personal_info}>
                                Gandalf
                            </Text> 
                            <Text style={styles.txt_personal_info}>
                                账号：0x7fdbhy3bh5lps9ef
                            </Text>
                            <Text style={styles.txt_personal_info}>
                                交易 200 | 积分 888 | 排名 90
                            </Text>                          
                        </View>
                        <View style={styles.action}>
                            <View style={styles.extract}>
                                <View style={{flex:1.5}}>
                                    <Text style={[styles.txt_action,styles.txt_fr]}>
                                        积分提取
                                    </Text>
                                </View>
                                <View style={{flex:1,alignItems: 'center'}}>
                                    <Image style={{width:30,height:30}} source = {require('../images/extract.png')}/> 
                                </View>
                            </View>
                            <View style={styles.record}>
                                <View style={{flex:1,alignItems: 'center'}}>
                                    <Image style={{width:30,height:30}} source = {require('../images/record.png')}/>
                                </View>
                                <View style={{flex:1.5}}>
                                    <Text style={[styles.txt_action,styles.txt_fl]}>
                                       交易记录
                                    </Text>
                                </View>
                            </View>
                        </View>
                        {/* </ImageBackground> */}
                    </View>
                    <View style={styles.integral}>
                        <View style={{width: 100, height: 50,marginLeft:20}}>
                            <Text style={[styles.txt_integral,styles.txt_fl]}>
                                我的积分
                            </Text>
                        </View>
                        <View style={{width: 100, height: 50,marginRight:20}}>
                            <Text style={[styles.txt_integral,styles.txt_fr]}>
                                666
                            </Text>
                        </View>
                    </View>
                    <View style={styles.integral}>
                        <View style={{width: 100, height: 50,marginLeft:20}}>
                            <Text style={[styles.txt_integral,styles.txt_fl]}>
                                已用积分
                            </Text>
                        </View>
                        <View style={{width: 100, height: 50,marginRight:20}}>
                            <Text style={[styles.txt_integral,styles.txt_fr]}>
                                666
                            </Text>
                        </View>
                    </View>
                    <View style={styles.open}>
                        <View style={{width: 100, height: 50,marginLeft:20}}>
                            <Text style={[styles.txt_integral,styles.txt_fl]}>
                                加入挖矿
                            </Text>
                        </View>
                        <View style={{width: 100, height: 50,marginRight:20,justifyContent:'center'}}>
                            <Switch
                                // //动态改变value
                                // value={this.state.value}
                                // //当切换开关室回调此方法
                                // onValueChange={(value)=>{this.setState({value: value})}}
                            />
                        </View>
                    </View>
                    <View style={styles.rank}>
                        <View style={{height:50,justifyContent:'center',borderBottomWidth:0.2,borderBottomColor:'#5164cc'}}>
                            <Text style={{textAlign:'center',fontSize:18,color:'#4e4e4e',lineHeight:50}}>
                                积分排行榜
                            </Text>                           
                        </View>
                        <View style={{height:50,flexDirection:'row',borderBottomWidth:0.2,borderBottomColor:'#5164cc'}}>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                名次
                            </Text>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                姓名
                            </Text>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                积分
                            </Text>
                        </View>
                        <View style={{height:50,flexDirection:'row',borderBottomWidth:0.2,borderBottomColor:'#5164cc'}}>
                            <View style={{flex:1,alignItems:'center'}}>
                                <Image style={{width:50,height:50}} source={require('../images/NO1.png')}/>
                            </View>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                马云
                            </Text>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                999
                            </Text>
                        </View>
                        <View style={{height:50,flexDirection:'row',borderBottomWidth:0.2,borderBottomColor:'#5164cc'}}>
                            <View style={{flex:1,alignItems:'center'}}>
                                <Image style={{width:50,height:50}} source={require('../images/NO2.png')}/>
                            </View>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                马化腾
                            </Text>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                900
                            </Text>
                        </View>
                        <View style={{height:50,flexDirection:'row',borderBottomWidth:0.2,borderBottomColor:'#5164cc'}}>
                            <View style={{flex:1,alignItems:'center'}}>
                                <Image style={{width:50,height:50}} source={require('../images/NO3.png')}/>
                            </View>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                王健林
                            </Text>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                850
                            </Text>
                        </View>
                        <View style={{height:50,flexDirection:'row',borderBottomWidth:0.2,borderBottomColor:'#5164cc'}}>
                            <Text style={{flex:1,fontSize:20,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                4
                            </Text>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                李嘉诚
                            </Text>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                820
                            </Text>
                        </View>
                        <View style={{height:50,flexDirection:'row',borderBottomWidth:0.2,borderBottomColor:'#5164cc'}}>
                            <Text style={{flex:1,fontSize:20,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                5
                            </Text>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                许家印
                            </Text>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                780
                            </Text>
                        </View>
                        <View style={{height:50,flexDirection:'row',borderBottomWidth:0.2,borderBottomColor:'#5164cc'}}>
                            <Text style={{flex:1,fontSize:20,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                6
                            </Text>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                丁磊
                            </Text>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                750
                            </Text>
                        </View>
                        <View style={{height:50,flexDirection:'row',borderBottomWidth:0.2,borderBottomColor:'#5164cc'}}>
                            <Text style={{flex:1,fontSize:20,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                7
                            </Text>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                雷军
                            </Text>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                700
                            </Text>
                        </View>
                        <View style={{height:50,flexDirection:'row',borderBottomWidth:0.2,borderBottomColor:'#5164cc'}}>
                            <Text style={{flex:1,fontSize:20,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                8
                            </Text>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                李彦宏
                            </Text>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                660
                            </Text>
                        </View>
                        <View style={{height:50,flexDirection:'row',borderBottomWidth:0.2,borderBottomColor:'#5164cc'}}>
                            <Text style={{flex:1,fontSize:20,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                9
                            </Text>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                周鸿祎
                            </Text>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                580
                            </Text>
                        </View>
                        <View style={{height:50,flexDirection:'row',borderBottomWidth:0.2,borderBottomColor:'#5164cc'}}>
                            <Text style={{flex:1,fontSize:20,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                10
                            </Text>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                刘强东
                            </Text>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                550
                            </Text>
                        </View>
                    </View>
                    <View style={styles.integral_record}>
                        <View style={{height:50,justifyContent:'center',borderBottomWidth:0.2,borderBottomColor:'#5164cc'}}>
                            <Text style={{textAlign:'center',fontSize:18,color:'#4e4e4e',lineHeight:50}}>
                                积分获取记录
                            </Text>                           
                        </View>
                        <View style={{height:50,flexDirection:'row',borderBottomWidth:0.2,borderBottomColor:'#5164cc'}}>
                            <View style={{flex:1,alignItems:'center'}}>
                                <Image style={{width:40,height:40,marginTop:5}} source={require('../images/chanzi.png')}/>
                            </View>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                1.8
                            </Text>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                55分钟前
                            </Text>
                        </View>
                        <View style={{height:50,flexDirection:'row',borderBottomWidth:0.2,borderBottomColor:'#5164cc'}}>
                            <View style={{flex:1,alignItems:'center'}}>
                                <Image style={{width:40,height:40,marginTop:5}} source={require('../images/chanzi.png')}/>
                            </View>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                1.2
                            </Text>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                一天前
                            </Text>
                        </View>
                        <View style={{height:50,flexDirection:'row',borderBottomWidth:0.2,borderBottomColor:'#5164cc'}}>
                            <View style={{flex:1,alignItems:'center'}}>
                                <Image style={{width:40,height:40,marginTop:5}} source={require('../images/chanzi.png')}/>
                            </View>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                1.5
                            </Text>
                            <Text style={{flex:1,fontSize:16,lineHeight:50,color:'#4e4e4e',textAlign:'center'}}>
                                两天前
                            </Text>
                        </View>
                        <View style={{height:50,justifyContent:'center',borderBottomWidth:0.2,borderBottomColor:'#5164cc'}}>
                            <Text style={{textAlign:'center',fontSize:18,color:'#4e4e4e',lineHeight:50}}>
                                获取更多记录
                            </Text>                           
                        </View>
                    </View>
                </ScrollView>         
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor: '#F5FCFF',
    },
    title: {
        flexDirection:'row',
        backgroundColor: '#303f9f',
        justifyContent: 'flex-start',
        height:50,
        // shadowOffset: {width: 0, height: 10},  
        // shadowOpacity: 2.5,  
        // shadowRadius: 15,  
        // //注意：这一句是可以让安卓拥有灰色阴影  
        // elevation: 4,  
        // // zIndex: Global.isIOS() ? 1 : 0  
    },
    logo:{
        flex:1,
        justifyContent:'center',
        height:50,
        marginLeft:20,
    },
    text: {
        fontSize: 20,
        // fontWeight:'bold',
        color:'#F5FCFF',
        textAlign: 'center',
        lineHeight:50,
    },
    sv:{
        backgroundColor: '#5164cc',
    },
    personal:{
        // backgroundColor: '#0950a0',
        height:250,
    },
    portrait:{
        height:100,
        marginTop:20,
        marginBottom:10,
        justifyContent:'center',
        alignItems: 'center',
    },
    portrait_img:{
        height:100,
        width:100,
        borderRadius:50,
        overflow:'hidden',
    },
    txt_personal_info:{
        fontSize: 13,
        color:'#F5FCFF',
        textAlign: 'center',
    },
    action:{
        height:30,
        marginTop:10,
        flex:1,
        flexDirection: 'row',
        justifyContent: 'center',
    },
    extract:{
        flex:1,
        flexDirection:'row',
        alignItems: 'center',
        // borderRightColor:'#F5FCFF',
        // borderRightWidth:0.2,
    },
    record:{
        flex:1,
        flexDirection:'row',
        alignItems: 'center',
    },
    txt_action:{
        fontSize:15,
        color:'#F5FCFF',
    },
    txt_fr:{
        textAlign:'right',
    },
    txt_fl:{
        textAlign:'left',
    },
    integral:{
        height:50,
        flexDirection: 'row',
        justifyContent: 'space-between',
        backgroundColor:'#F5FCFF',
        borderBottomWidth:0.2,
        borderBottomColor:'#5164cc'
    },
    txt_integral:{
        fontSize:16,
        lineHeight:50,
        color:'#4e4e4e',
        textAlign:'center',
    },
    open:{
        flex:1,
        flexDirection:'row',
        justifyContent:'space-between',
        height:50,
        marginTop:50,
        backgroundColor:'#F5FCFF',
    },
    rank:{
        height:600,
        marginTop:50,
        backgroundColor:'#F5FCFF',
    },
    integral_record:{
        height:250,
        marginTop:50,
        marginBottom:50,
        backgroundColor:'#F5FCFF',
    }
});